<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue';
import * as echarts from 'echarts';
import { useRadioOptionStore } from '../../stores/radioStore';

// 使用 Pinia Store
const optionStore = useRadioOptionStore();

// ECharts 实例
const chart = ref<HTMLElement | null>(null);
let myChart: echarts.ECharts | null = null;

// 初始化 ECharts
onMounted(() => {
  if (chart.value) {
    myChart = echarts.init(chart.value, 'dark');
    updateChart();
  }
});

// 监听 selectedOption 的变化
watch(
  () => optionStore.selectedOption,
  () => {
    updateChart();
  }
);

// 根据 selectedOption 更新图表
const updateChart = () => {
  if (!myChart) return;

  let option: echarts.EChartOption = {};

  switch (optionStore.selectedOption) {
    case 'smooth':
      option = {
        title: { text: '平滑段阈值分析' },
        xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] },
        yAxis: { type: 'value' },
        series: [{ name: '平滑段', type: 'line', data: [5, 20, 36, 10, 10] }],
      };
      break;
    case 'rise':
      option = {
        title: { text: '上升段阈值分析' },
        xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] },
        yAxis: { type: 'value' },
        series: [{ name: '上升段', type: 'line', data: [10, 22, 28, 43, 49] }],
      };
      break;
    case 'abnormal':
      option = {
        title: { text: '本月异常点个数统计' },
        xAxis: { type: 'category', data: ['Week 1', 'Week 2', 'Week 3', 'Week 4'] },
        yAxis: { type: 'value' },
        series: [{ name: '异常点', type: 'bar', data: [5, 20, 36, 10] }],
      };
      break;
    case 'position':
      option = {
        title: { text: '异常点于标准曲线位置' },
        xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] },
        yAxis: { type: 'value' },
        series: [
          { name: '标准曲线', type: 'line', data: [10, 20, 30, 40, 50] },
          { name: '异常点', type: 'scatter', data: [15, 25, 35, 45, 55] },
        ],
      };
      break;
    default:
      option = {};
  }

  myChart.setOption(option);
};
</script>

<template>
  <!-- 图表容器 -->
  <div ref="chart" class="c"></div>
</template>

<style scoped>
.c {
  width: 1335px;
  height: 540px;
  margin-left: -20px;
  background-color: aliceblue;
}
</style>